<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #box1{
                width: 400px;
                height: 400px;
                background-image:url("https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00055-2905.jpg")

                /* 背景图的使用需要加url */
            }

    </style>
</head>
<body>
    
</body>
<div id="box1">
    <span>百度首页</span>
    <img src="https://himg.bdimg.com/sys/portraitn/item/9f454a736f6e333931f822" align="top"/>
    <span>个人中心</span>
    <img src="https://himg.bdimg.com/sys/portraitn/item/9f454a736f6e333931f822" align="right" width="50" height="50"/>

    <!-- 图片的排列分为了水平和垂直
        left right 会让图片在父元素的左右对齐
        bottom middle top控制的图片周围文字在和图片的对齐方式
    -->
        
    
    <a href="http://www.baidu.com">
            <img src="https://gips0.baidu.com/it/u=838505001,1009740821&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f254_80"/>
    </a>
</div>
</html>